当 XMLHttpRequest 对象的 responseType 属性设置为 arrayBuffer 时，服务器响应数据将是一个 ArrayBuffer 对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
window.mozIndexedDB || window.msIndexedDB; window.IDBTransaction =
window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange || window.msIDBKeyRange; window.IDBCursor =
window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor; window.URL
= window.URL || window.webkitURL; var dbName = 'imgDB'; // 数据库名 var
dbVersion = 20190418; 版本号 // var idb; function init() { var dbConnect =
indexedDB.open(dbName, dbVersion); // 连接数据库 dbConnect.onsuccess =
function (e) { // 连接成功 idb = e.target.result; // 获取数据库 };
dbConnect.onerror = function () { alert(' 数据库连接失败 '); };
dbConnect.onupgradeneeded = function (e) { idb = e.target.result; var tx =
e.target.transaction; tx.onabort = function (e) { alert(' 对象仓库创建失败
'); }; var name = 'img'; var optionalParameters = { keyPath: 'id',
autoIncrement: true, }; var store = idb.createObjectStore(name,
optionalParameters); alert(' 对象仓库创建成功 '); }; } function
downloadPic() { var xhr = new XMLHttpRequest(); xhr.open('GET',
'images/1.png', true); xhr.responseType = 'arrayBuffer'; xhr.onload =
function (e) { if (this.status == 200) { var bb = new Blob([this.response]);
var reader = new FileReader(); reader.readAsDataURL(bb); reader.onload =
function (f) { var result = document.getElementById('result'); // 在 IndexDB
数据库中保存二进制数据 var tx = idb.transaction(['img'], 'readwrite');
tx.oncomplete = function () { alert('保存数据成功 '); }; tx.onabort =
function () { alert(' 保存数据失败 '); }; var store = tx.objectStore('img');
var value = { img: this.result }; store.put(value); }; } }; xhr.send(); }
function showPic() { var tx = idb.transaction(['img'], 'readonly'); var
store = tx.objectStore('img'); var req = store.get(1); req.onsuccess =
function () { if (this.result == undefined) { alert(' 没有符合条件的数据 ');
} else { var img = document.createElement('img'); img.src = this.result.img;
document.body.appendChild(img); } }; req.onerror = function () { alert('
获取数据失败 '); }; }
</head>
<body onload="init()">
<input type="button" value=" 下载图片 " onclick="downloadPic()" />
<input type="button" value=" 显示图片 " onclick="showPic()" /><output
id="result"
></output>
</body>
</html>